<template>
    <div class="lawAptitude">
        <Header style="z-index:1025">
            <header-menu></header-menu>
        </Header>
        <div class="main">
            <div class="content">
                <div class="img"><img src="../Lawyer/img/lawyer.png" alt=""></div>
                <div class="cont">创建律师主页</div>
                <div class="step">
                    <Steps :current="2">
                        <Step title="填写律师姓名"></Step>
                        <Step title="填写律师基本信息"></Step>
                        <Step title="上传律师资质"></Step>
                    </Steps>
                </div>
                <div class="step-tit">
                    <p class="p1">请上传律师资质文件照片以便我们对您律师的资质进行审核</p>
                    <p>（资质信息只有您自己能看到，不会显示给其他人）</p>
                    <ul>
                        <li>
                            <el-upload
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    list-type="picture-card"
                                    :limit="2"
                                    :on-preview="handlePictureCardPreview"
                                    :on-remove="handleRemove">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                        </li>
                    </ul>
                    <div class="hint"><p><span>*</span>请上传 <span>1.律师资格证书首页与详细信息页</span> <span>2.律师执业证书首页与详细信息页</span></p></div>
                    <div class="up-hint"><p>*请上传扫描件或照片，法人名称、注册资本等敏感信息可打马赛克</p></div>
                </div>
                <div class="formlist">
                    <p>您的联系方式：</p>
                    <ul>
                        <li>
                            <div class="ts"><span>*</span>姓名：</div><div class="int"><input type="text"></div>
                        </li>
                        <li>
                            <div  class="ts"><span>*</span>手机：</div><div class="int"><input type="text"></div>
                        </li>
                        <li>
                            <div  class="ts"><span>&nbsp;</span>座机：</div><div class="int"><input type="text"><span>选填</span></div>
                        </li>
                        <li>
                            <div  class="ts"><span>&nbsp;</span>QQ：</div><div class="int"><input type="text"><span>选填</span></div>
                        </li>
                        <li>
                            <div  class="ts"><span>*</span>Email：</div><div class="int"><input type="text"></div>
                        </li>
                        <li>
                            <div  class="ts"><span>*</span>身份：</div><div class="choose"><input  type="radio" name="id"><span>律师本人</span><input type="radio"name="id"><span>律师市场部</span><input type="radio"name="id"><span>律师销售部</span><input type="radio"name="id"><span>翻译客服部</span></div>
                        </li>
                    </ul>

                </div>
                <div class="next"><button>完成</button><a href="javascript:;" @click="pre()">返回上一步</a></div>

            </div>

        </div>
        <bottom-icon></bottom-icon>
        <Footer>
            <page-footer></page-footer>
        </Footer>
    </div>
</template>

<script>
    import BottomIcon from '../../components/BottomIcon/'
    import PageFooter from '../../components/Footer/'
    import HeaderMenu from '@/components/Header/'
    export default {
        name: "lawAptitude",
        components:{
            BottomIcon,
            PageFooter,
            HeaderMenu
        },
        data() {
            return {
                dynamicValidateForm: {
                    domains: [{
                        value: ''
                    }],
                    email: ''
                }
            };
        },
        methods: {
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },

                pre() {
                    this.$router.push({path:'/lawInformation'})
                }

        }
    }
</script>

<style lang="less">
    .main{
        background-color: #FFA3B2;
        padding: 52px 0;
        .content{
            width: 1200px;
            height:920px;
            border-radius: 6px;
            background-color: #fff;
            margin: 0 auto;
            .img{
                margin: 23px 0 0 42px;
                float: left;
            }

            .cont{
                float: left;
                font-size: 24px;
                color: #ff5371;
                margin: 23px 0 0 8px;
            }
            .step{
                clear: both;
                padding: 40px 0 0 176px;
            }
            .step-tit{
                text-align: center;
            }
            .step-tit p{
                font-size: 16px;
            }
            .step-tit .p1{
                margin: 53px 0 0px 0;

            }
            .step-tit ul{
                margin: 35px auto 0;
                width: 620px;
                overflow: hidden;
            }
            .step-tit ul li{
                /*float: left;*/
                /*width: 190px;*/
                /*height: 190px;*/
                /*padding: 0 10px;*/
            }
            /*.step-tit ul li span{*/
                /*position: absolute;*/
                /*right: 0;*/
                /*top: 0;*/
            /*}*/

            .el-upload__text{
                color: #FE5371;
                padding: 0 10px;
            }
            .up-hint p{
                font-size: 12px;
                color: #999999;
            }
            .hint{
                margin-top: 10px;
            }
            .hint span{
                color: #FE5371;

                padding-left: 20px;
            }
            .formlist{
                width: 528px;
                margin: 0 auto;
            }
            .formlist p{
                margin-top: 20px;
                font-size: 16px;
            }
            .formlist ul li{
                clear: both;
                padding: 16px 0 0 90px;
            }
            .formlist div{
                float: left;
            }
            .ts{
                width: 80px;
                text-align: right;
                font-size: 14px;
            }
            .ts span{
                color: #FE5371;
            }
            .int input{
                width: 228px;
                height: 32px;
            }
            .int span{
                padding-left: 10px;
                color: #999999;
            }
            .choose input{
                width: auto;
                height: auto;
                margin: 0 8px;
            }

        }
        .next{
            clear: both;
            text-align: center;
            padding: 40px 0 0 80px;
        }
        .next button{
            width: 228px;
            height: 40px;
            background-color: #ff5371;
            border-radius: 4px;
            outline: none;
            border: none;
            font-size: 20px;
            color: #fff;
        }
        .next a{
            font-size: 14px;
            padding-left: 20px;
            color:#ff5371 ;
        }


    }
</style>